<template>
  <div class="cute-moments">
    <el-empty v-if="moments.length === 0" description="还没有记录任何心情" />

    <div v-else class="moment-cards">
      <div
        v-for="(moment, index) in moments"
        :key="moment.id"
        class="moment-card"
        :class="`card-color-${index % 4}`"
      >
        <!-- 装饰性贴纸 -->
        <div class="sticker sticker-1">★</div>
        <div class="sticker sticker-2">♡</div>

        <div class="moment-header">
          <div class="moment-meta">
            <div class="cute-date-badge">
              {{ formatDateCute(moment.createdAt) }}
            </div>
            <el-tag
              v-if="moment.mood"
              :type="getMoodTagType(moment.mood)"
              size="small"
              round
            >
              {{ getMoodLabel(moment.mood) }}
            </el-tag>
            <el-tag v-if="moment.isPrivate" type="info" size="small" round>
              <el-icon><Lock /></el-icon>
              私密
            </el-tag>
          </div>
          <div class="moment-actions">
            <el-button
              size="small"
              text
              @click="$emit('edit', moment.id)"
            >
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button
              size="small"
              text
              type="danger"
              @click="$emit('delete', moment.id)"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>

        <div class="moment-content">
          <p class="moment-text">{{ moment.content }}</p>

          <div v-if="moment.images && moment.images.length > 0" class="moment-images">
            <el-image
              v-for="(image, idx) in moment.images"
              :key="idx"
              :src="image"
              fit="cover"
              class="moment-image"
              :preview-src-list="moment.images"
              :initial-index="idx"
            />
          </div>

          <div v-if="moment.tags && moment.tags.length > 0" class="moment-tags">
            <el-tag
              v-for="tag in moment.tags"
              :key="tag"
              size="small"
              effect="plain"
              round
              @click="$emit('search-tag', tag)"
              class="tag-clickable"
            >
              #{{ tag }}
            </el-tag>
          </div>
        </div>

        <!-- 底部装饰 -->
        <div class="bottom-decoration">
          <span class="deco-item">～</span>
          <span class="deco-item">♪</span>
          <span class="deco-item">～</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete, Lock } from '@element-plus/icons-vue'
import type { Moment, MoodType } from '../types'

interface Props {
  moments: Moment[]
}

defineProps<Props>()

defineEmits<{
  edit: [id: string]
  delete: [id: string]
  'search-tag': [tag: string]
}>()

// 心情选项
const moodOptions = [
  { value: 'happy', label: '😊 开心' },
  { value: 'sad', label: '😢 难过' },
  { value: 'excited', label: '🎉 兴奋' },
  { value: 'peaceful', label: '😌 平静' },
  { value: 'anxious', label: '😰 焦虑' },
  { value: 'grateful', label: '🙏 感恩' },
  { value: 'thoughtful', label: '🤔 沉思' },
  { value: 'nostalgic', label: '😌 怀念' }
]

// 获取心情标签类型
const getMoodTagType = (mood: MoodType) => {
  const typeMap = {
    happy: 'success',
    excited: 'success',
    grateful: 'success',
    peaceful: 'info',
    thoughtful: 'info',
    nostalgic: 'info',
    sad: 'warning',
    anxious: 'danger'
  }
  return typeMap[mood as keyof typeof typeMap] || 'info'
}

// 获取心情标签文本
const getMoodLabel = (mood: MoodType) => {
  const option = moodOptions.find(opt => opt.value === mood)
  return option?.label || mood
}

// 格式化日期 - 可爱风格
const formatDateCute = (dateStr: string) => {
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}月${day}日`
}
</script>

<style scoped>
.cute-moments {
  height: 100%;
  overflow-y: auto;
  padding: 0 10px;
}

.moment-cards {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 20px;
}

/* 可爱卡片风格 */
.moment-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border: 3px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.moment-card:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 四种可爱配色 */
.card-color-0 {
  border-color: #ffb3d9;
  background: linear-gradient(135deg, #fff5f9 0%, #ffe8f0 100%);
}

.card-color-1 {
  border-color: #b3d9ff;
  background: linear-gradient(135deg, #f5f9ff 0%, #e8f3ff 100%);
}

.card-color-2 {
  border-color: #c2f0c2;
  background: linear-gradient(135deg, #f5fff5 0%, #e8ffe8 100%);
}

.card-color-3 {
  border-color: #ffd9b3;
  background: linear-gradient(135deg, #fff9f5 0%, #fff0e8 100%);
}

/* 装饰性贴纸 */
.sticker {
  position: absolute;
  font-size: 24px;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite;
  z-index: 0;
}

.sticker-1 {
  top: 15px;
  right: 20px;
  color: #ff6b9d;
  animation-delay: 0s;
}

.sticker-2 {
  bottom: 15px;
  right: 25px;
  color: #ffa94d;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

.moment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.moment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 可爱的日期徽章 */
.cute-date-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.moment-actions {
  display: flex;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.moment-card:hover .moment-actions {
  opacity: 1;
}

.moment-content {
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* 可爱的文本样式 */
.moment-text {
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: 1.8;
  color: #4a4a4a;
  white-space: pre-wrap;
}

.moment-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.moment-image {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.moment-image:hover {
  transform: scale(1.1) rotate(-3deg);
}

/* 可爱的标签 */
.moment-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.moment-tags :deep(.el-tag) {
  font-weight: 500;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tag-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-clickable:hover {
  transform: scale(1.1) rotate(2deg);
}

/* 心情标签可爱风格 */
.moment-meta :deep(.el-tag) {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 底部装饰 */
.bottom-decoration {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  opacity: 0.3;
  font-size: 18px;
  color: #ff6b9d;
  z-index: 0;
}

.deco-item {
  animation: wave 2s ease-in-out infinite;
}

.deco-item:nth-child(2) {
  animation-delay: 0.2s;
}

.deco-item:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .moment-card {
    padding: 20px;
    border-width: 2px;
  }

  .cute-date-badge {
    font-size: 11px;
    padding: 5px 12px;
  }

  .moment-images {
    gap: 8px;
  }

  .moment-image {
    width: 70px;
    height: 70px;
  }

  .sticker {
    font-size: 20px;
  }
}
</style>
